<template>
  <div class="icon-body">
    <el-popover placement="bottom-start" :width="800" trigger="click">
      <template #reference>
        <el-input v-model="currentValue" placeholder="点击选择图标" readonly @focus="filterText = ''">
          <template #prefix>
            <svg-icon v-if="currentValue" :iconClass="currentValue" />
          </template>
        </el-input>
      </template>
      <el-input v-model="filterText" placeholder="请输入数据描述进行检索" clearable />
      <div class="icon-list">
        <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
          <svg-icon :icon-class="item" style="height: 30px; width: 24px; margin: 10px" />
          <span>{{ item }}</span>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script lang="ts" setup name="IconSelect">
  import icons from './requireIcons'
  import { computed, toRefs, watch, ref } from 'vue'
  const emits = defineEmits(['update:value'])
  const props = defineProps({
    value: {
      type: String,
      required: true,
      default: undefined,
    },
  })
  const { value } = toRefs(props)

  const filterText = ref('')
  const iconList = ref(icons)
  const currentValue = computed({
    get: () => {
      return value?.value
    },
    set: (val) => {
      emits('update:value', val)
    },
  })
  watch(filterText, (newVal) => {
    iconList.value = icons.filter((item) => item.indexOf(newVal) !== -1)
  })

  function selectedIcon(name: string) {
    currentValue.value = name
  }
</script>

<style lang="scss" scoped>
  .icon-body {
    width: 100%;
  }
  .icon-list {
    margin-top: 10px;
    div {
      display: flex;
      float: left;
      align-items: center;
      width: 20%;
      &:hover {
        background: rgba(135, 207, 235, 0.267);
        cursor: pointer;
      }
    }
  }
</style>
